﻿<phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"  
    x:Class="BasharLulu.QuranBookmark.WP7.Bookmark"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="clr-namespace:BasharLulu.QuranBookmark.WP7"
    d:DataContext="{d:DesignData SampleData/SuraMainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">
    <phone:PhoneApplicationPage.Resources>
        <converters:StringFormatConverter x:Key="stringConverter" />
        <converters:SuraEnglishNameConverter x:Key="suraConverterE" />
        <converters:SuraArabicNameConverter x:Key="suraConverterA" />
        
        <!-- The template for the list header. This will scroll as a part of the list. -->
        <!--<DataTemplate x:Key="SuraListHeader">
            <Border Background="Purple">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Cities Header" />
                    <TextBlock Text ="{Binding Path=ItemsSource.Count, ElementName=SuraListGroup}"/>
                </StackPanel>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="SuraListFooter">
            <Border Background="Green">
                <TextBlock Text="Cities Footer" />
            </Border>
        </DataTemplate>-->

        <!-- The template for sura items -->
        <DataTemplate x:Key="SuraItemTemplate">
            <StackPanel FlowDirection="LeftToRight" Orientation="Horizontal" Background="Green">
                <TextBlock Margin="20,0,0,0" Text="{Binding AyaNumber, Converter={StaticResource stringConverter}, ConverterParameter='Verse {0}'}" FontSize="40" Height="75"/>
            </StackPanel>
        </DataTemplate>

        <!-- The group header template, for groups in the main list -->
        <DataTemplate x:Key="SuraGroupHeaderTemplate">
            <Border Background="Yellow" Height="90" Margin="10,0,10,10">
                <StackPanel>
                    <TextBlock Margin="6,0,0,0" Text="{Binding Key, Converter={StaticResource suraConverterA}}" FontSize="40" Foreground="Black"/>
                    <TextBlock Margin="6,0,0,0" Text="{Binding Key, Converter={StaticResource suraConverterE}}" FontSize="20" Foreground="Black"/>
                </StackPanel>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="SuraGroupItemTemplate" >
            <Border Background="Yellow" Height="90" Margin="10,0,10,10" >
                <StackPanel>
                    <TextBlock Margin="6,6,6,0"  Text="{Binding Key, Converter={StaticResource suraConverterA}}" FontSize="40" Foreground="Black" VerticalAlignment="Bottom" />
                    <TextBlock Margin="6,0,0,0" Text="{Binding Key, Converter={StaticResource suraConverterE}}" FontSize="20" Foreground="Black"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Green">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28" Background="Green">
            <TextBlock x:Name="ApplicationTitle" Text="quran bookmark" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="set bookmark" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="6,0,6,0">
            <toolkit:LongListSelector 
                ItemsSource="{Binding Items}">
            </toolkit:LongListSelector>

            <toolkit:LongListSelector x:Name="SuraListGroup" Background="Transparent"  Grid.Row="1"
                    ItemTemplate="{StaticResource SuraItemTemplate}"
					GroupHeaderTemplate="{StaticResource SuraGroupHeaderTemplate}"
                    GroupItemTemplate="{StaticResource SuraGroupItemTemplate}"
                    SelectionChanged="SuraListGroup_SelectionChanged">
                <!--ListHeaderTemplate="{StaticResource SuraListHeader}" 
				    ListFooterTemplate="{StaticResource SuraListFooter}"-->
                <!--<toolkit:LongListSelector.GroupItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel/>
                    </ItemsPanelTemplate>
                </toolkit:LongListSelector.GroupItemsPanel>-->
            </toolkit:LongListSelector>
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default">
            <shell:ApplicationBarIconButton IconUri="/Icons/Dark/check.png" Text="Accept" Click="ApplicationBarIconButton_Click_Accept" />
            <shell:ApplicationBarIconButton IconUri="/Icons/Dark/cancel.png" Text="Cancel" Click="ApplicationBarIconButton_Click_Deny"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>
